<template>
	<view class="fu-p-30">
		<demo-desc>
			此组件内部实现以 uni-app 的button组件为基础，对其进行了扩展，使其能够在 uni-app 的各个平台上表现一致。
		</demo-desc>
		<fu-section title="基础案例" customClass="fu-m-t-20" type="line">
			<view class="fu-flex fu-flex-wrap fu-gap-20">
				<fu-button text="主要按钮" size="normal" type="primary"></fu-button>
				<fu-button text="成功按钮" size="normal" type="success"></fu-button>
				<fu-button text="信息按钮" size="normal" type="info"></fu-button>
				<fu-button text="警告按钮" size="normal" type="warning"></fu-button>
				<fu-button text="危险按钮" size="normal" type="error"></fu-button>
			</view>
		</fu-section>
		
		<fu-section title="镂空按钮" customClass="fu-m-t-20" type="line">
			<view class="fu-flex fu-flex-wrap fu-gap-20">
				<fu-button text="默认按钮" size="normal" type="info" plain></fu-button>
				<fu-button text="主要按钮" size="normal" type="primary" plain></fu-button>
				<fu-button text="成功按钮" size="normal" type="success" plain></fu-button>
				<fu-button text="警告按钮" size="normal" type="warning" plain></fu-button>
				<fu-button text="危险按钮" size="normal" type="error" plain></fu-button>
			</view>
		</fu-section>
		
		<fu-section title="禁用按钮" customClass="fu-m-t-20" type="line">
			<view class="fu-flex fu-flex-wrap fu-gap-20">
				<fu-button text="默认按钮" size="normal" type="info" disabled></fu-button>
				<fu-button text="主要按钮" size="normal" type="primary" disabled></fu-button>
				<fu-button text="成功按钮" size="normal" type="success" disabled></fu-button>
				<fu-button text="警告按钮" size="normal" type="warning" disabled></fu-button>
				<fu-button text="危险按钮" size="normal" type="error" disabled></fu-button>
			</view>
		</fu-section>
		
		<fu-section title="按钮图标&按钮形状" customClass="fu-m-t-20" type="line">
			<view class="fu-flex fu-flex-wrap fu-gap-20">
				<fu-button text="形状按钮">
					<template v-slot:prefix>
						<fu-icons name="location" size="20" color="#ffffff"></fu-icons>
					</template>
				</fu-button>
				<fu-button shape="circle" text="形状按钮"></fu-button>
			</view>
		</fu-section>
		
		<fu-section title="自定义大小" customClass="fu-m-t-20" type="line">
			<fu-button text="超大尺寸" size="large"></fu-button>
			<view class="fu-flex fu-flex-column-center fu-flex-wrap fu-gap-20 fu-m-t-20">
				<fu-button text="普通尺寸" size="normal" type="error"></fu-button>
				<fu-button text="小型尺寸" size="small" type="success"></fu-button>
				<fu-button text="mini尺寸" size="mini" type="warning"></fu-button>
			</view>
		</fu-section>
		
		<fu-section title="自定义颜色" customClass="fu-m-t-20" type="line">
			<view class="fu-flex fu-flex-wrap fu-gap-20">
				<fu-button text="渐变色按钮" color="repeating-linear-gradient(45deg, #31C9E8, #2DE8BD)"></fu-button>
				<fu-button text="渐变色按钮" color="repeating-linear-gradient(45deg, #00C3FF, #58FFF5)"></fu-button>
				<fu-button text="渐变色按钮" color="repeating-linear-gradient(45deg, #00C3FF, #24F083)"></fu-button>
			</view>
		</fu-section>
		
		<fu-section title="加载中" customClass="fu-m-t-20" type="line">
			<view class="fu-flex fu-flex-wrap fu-gap-20">
				<fu-button loadingText="加载中" loadingMode="circle" type="success" loading></fu-button>
				<fu-button loadingText="加载中" type="error" loading></fu-button>
			</view>
		</fu-section>
		
		<fu-section title="防抖节流(默认间隔200ms,这里用1s)" customClass="fu-m-t-20" type="line">
			<fu-button size="normal" @click="handleClick('点击了防抖')" :blockTime="1000" scene="debounce">防抖模式</fu-button>
			<fu-button size="normal" type="warning" margin="20rpx 0" @click="handleClick('点击了节流')" :blockTime="1000" scene="throttle">节流模式</fu-button>
		</fu-section>
	</view>
</template>

<script setup>
	// methods方法
	const handleClick = (e) => {
		uni.$fu.toast(e)
	}
</script>

<style lang="scss">
	page {
		background-color: $bg-color;
	}
</style>